<template>
  <div id="app">
    <el-container>
      <el-header style="background-color: #fdfdfd;">

        <el-row>
          <el-col :span="4" style="display: flex; ">
            <div class="grid-content bg-purple" style="justify-content: center;">
              <img src="@/assets/1233.png" alt="" style="width: 40px;height: 40px; position: relative; top: 10px;">
              <span style="font-size: 20px; margin-left: 15px; color: rgb(25, 4, 4)">校园树洞</span>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple-light" flex>
              <el-menu default-active="&rote.path" class="demo" router background-color="#fdfdfd" text-color="#rgb(133, 144, 166)"
                mode="horizontal" active-text-color="#0f0101" >
                <el-menu-item index="/">
                  <i class="el-icon-s-home"></i>
                  <span slot="title">系统首页</span>
                </el-menu-item>
                <el-menu-item index="/pror">
                  <span slot="title">倾诉树洞</span>
                </el-menu-item>
                <el-menu-item index="/region">
                  <span slot="title">区域树洞</span>
                </el-menu-item>
                <el-menu-item index="/virtual">
                  <span slot="title">匿名角色</span>
                </el-menu-item>
                <el-menu-item index="/message">
                  <span slot="title">消息通知</span>
                </el-menu-item>
                <el-submenu index="2" v-if="user.roleId === '2C01305AF96C4556BCE7719AACC0DEC6' || user.roleId === '2C01305AF96C4556BCE7719AACC0DEC9'">
                  <template slot="title">
                    <i class="el-icon-location" ></i><span>用户管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="super" v-if="user.roleId === '2C01305AF96C4556BCE7719AACC0DEC6'">超管信息</el-menu-item>
                    <el-menu-item index="admin">管理员信息</el-menu-item>
                    <el-menu-item index="user">用户信息</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                
              </el-menu>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple"><span style="float: right; height: 60px; line-height: 60px;">
                <el-dropdown>
                  <span>
                    <div style="float: left; margin-right: 6px;height: 60px; line-height: 90px;">
                      <el-image style="width: 40px; height: 40px; border-radius: 50%;margin-top: 6px;"
                        :src="'http://localhost:8080/api/files/' + user.userIcon"
                        :preview-src-list="['http://localhost:8080/api/files/' + user.userIcon]">
                      </el-image>
                    </div>
                    <span class="el-dropdown-link" style="color: #0f0101; font-size: 16px;">{{ user.userName }}<i
                        class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <div @click="logout">退出登录</div>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <div @click="openUserInfo()">个人信息</div>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <div @click="openUserInfo()">修改个人信息</div>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="user.roleId === '2C01305AF96C4556BCE7719AACC0DEC6'">
                      <div @click="sensitive()">敏感词管理</div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </div>
          </el-col>
        </el-row>
        <div>
    </div>
    <el-dialog title="个人信息" :visible.sync="changeVu" width="50%" >
            <div >
              <el-form ref="user" :model="user" label-width="80px">
                <el-form-item label="用户名称">
                  {{ user.userName }}
                </el-form-item>
                <el-form-item label="用户头像">
                  <el-image  class="image66" :src="'http://localhost:8080/api/files/' +user.userIcon"></el-image>
                </el-form-item>
                <el-form-item label="用户性别">
                  <div v-if="user.userSex = 1">
                    男
                  </div>
                  <div v-else>
                    女
                  </div>
                </el-form-item>
                <el-form-item label="用户电话">
                  {{ user.phone }}
                </el-form-item>
                <el-form-item label="当前虚拟人物名称">
                  {{ user.virtuallyName }}
                </el-form-item>
                <el-form-item label="当前虚拟人物头像">
                  <el-image  class="image66" :src="'http://localhost:8080/api/files/' +user.virtuallyImage" ></el-image>
                </el-form-item>
                <el-form-item label="当前虚拟人物个性签名">
                  {{ user.personal }}
                </el-form-item>
              </el-form>
            </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="changeVu = false">确定</el-button>   
            </div>
    </el-dialog>

    <el-dialog title="敏感词管理" :visible.sync="sensitive1" width="50%" >
        <div>
            <el-input v-model="from.sensitiveWord" style="width: 200px;" placeholder="敏感词"></el-input>
            <el-button type="warning" style="margin-left: 10px;" @click="findBySearch()">查询</el-button>
            <el-button type="warning" style="margin-left: 10px;" @click="add()">新增</el-button>
        </div>
            <div >
              <el-table :data="from" style="width: 100%">
                <el-table-column prop="sensitiveWord" label="敏感词"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click = "editor(scope.row.userId)">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.userId)">
                            <el-button slot="reference" type="warning" style="margin-left: 5px;">删除</el-button>
                        </el-popconfirm>
                    </template>
                    
                </el-table-column>
            </el-table>
            </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="sensitive1 = false">确定</el-button>   
            </div>
    </el-dialog>
      </el-header>
      <el-main  style="background-color: #c1c9c5 ; padding-top: 5px;">
          <div class="div22">
          <div  class="centered-container">
            <router-view />
          </div>
        </div>
      </el-main>
      <el-footer v-show="showFooter">Footer</el-footer>
    </el-container>
    
  </div>
</template>
  
<style >
.demo{
  justify-content: center;
  display: flex;
  align-items: center;
}
.el-menu{
  border-right: none !important;
}
.div22{
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中对齐 */ 
    /*  overflow: auto; */ 
    height: calc(100vh - 90px);
}
.centered-container{
    min-width: 960px;
    max-width: 1200px;
}
.image66{
  width: 60px;
  height: 60px;
}
</style>
<script>
import request from "@/utils/request";

export default {
  name: "Layout",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      showFooter: false,
      changeVu: false,
      from:[],
      sensitive1:false,
    }
   
  },
  // 页面加载的时候，做一些事情，在created里面
  created() {
  },
  // 定义一些页面上控件出发的事件调用的方法
  methods: {
    
    logout() {
      localStorage.removeItem("user");
      this.$router.push("/login")
    },
    openUserInfo(){
      this.changeVu = true
    },
    sensitive(){
      this.sensitive1 = true
      //查询所有敏感词
      request.get("/sensitive/findAll").then(res=>{
        if (res.code === 1) {
                    this.from = res.data
                }
                else{
                    this.$message.error(res.msg)
                }
      })
    }
}
}
</script>
